@extends('public.base')
@section('body')
  <div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
      <a lay-href="">主页</a>
      <a><cite>组件</cite></a>
      <a><cite>数据表格</cite></a>
      <a><cite>数据表格的重载</cite></a>
    </div>
  </div>

  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">数据表格的重载</div>

          <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">文章ID</label>
                <div class="layui-input-inline">
                  <input type="text" name="uid" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">作者</label>
                <div class="layui-input-inline">
                  <input type="text" name="nickname" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
              </div>


              <div class="layui-inline">
                <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search">
                  <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
                <button class="layui-btn layuiadmin-btn-list" data-type="add">添加</button>
              </div>
            </div>
          </div>


          <div class="layui-card-body">
            <table class="layui-hide" id="test-table-reload" lay-filter="user"></table>
            <script type="text/html" id="test-table-operate-barDemo">
                <div class="layui-btn-group">
                      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                </div>
            </script>
          </div>
        </div>

      </div>
    </div>
  </div>

  <script src="{{ADMIN_PATH}}layui/layuiadmin/layui/layui.js?{{time()}}"></script>
  <script>
      var index_url='{{url('admin/shop/goods/index')}}';
      var add_url='{{url('admin/shop/goods/add')}}';
      var edit_url='{{url('admin/shop/goods/edit')}}';
      var del_url='{{url('admin/shop/goods/del')}}';
      layui.config({
          base: '{{ADMIN_PATH}}layui/layuiadmin/' //静态资源所在路径
      }).extend({
          index: 'lib/index' //主入口模块
      }).use(['index', 'table'], function(){
          var $ = layui.$
              ,admin = layui.admin
              ,element = layui.element
              ,form = layui.form;
          var table = layui.table;


          //=========================表单搜索搜索========================
          form.on('submit(LAY-app-contlist-search)', function(data){

              var field = data.field;
              console.log(field);
              //
              // //执行重载
              table.reload('test-table-reload', {
                  where: field
              });
          });
          $('.layui-btn.layuiadmin-btn-list').on('click', function(){
              var type = $(this).data('type');
              active[type] ? active[type].call(this) : '';
          });
          //===================表格渲染========================
          table.render({
              elem: '#test-table-reload'
              ,url: index_url
              ,method:'post'
              ,cols: [[
                  {checkbox: true, fixed: true}
                  ,{field:'id', title: '产品ID', width:80, sort: true, fixed: true}
                  ,{field:'goods_name', title: '产品名称', width:300, sort: true, fixed: true}
                  ,{field:'goods_price', title: '价格', width:100, sort: true, fixed: true}
                  ,{field:'goods_state', title: '上架', width:100, sort: true, fixed: true,fixed: 'right', templet:temp_switch_tp2}
                  ,{width:100, align:'center', fixed: 'right', toolbar: '#test-table-operate-barDemo'}
              ]]
              //进行按钮操作
              ,page: true
              ,done: function(res, curr, count){
                  //如果是异步请求数据方式，res即为你接口返回的信息。
                  //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                  console.log(res);

                  //得到当前页码
                  console.log(curr);

                  //得到数据总量
                  console.log(count);
              }
          });
//监听工具条
          table.on('tool(user)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
              var data = obj.data; //获得当前行数据
              var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
              var tr = obj.tr; //获得当前行 tr 的DOM对象

              if(layEvent === 'detail'){ //查看
                  //do somehing
              } else if(layEvent === 'del'){ //删除
                  alert('ccccc');
              } else if(layEvent === 'edit'){ //编辑
                  layer.open({
                      type: 2,
                      title: '编辑:'+data.goods_name,
                      shade: false,
                      area: ['70%', '500px'] //宽高
                      ,btn: ['确定', '取消']
                      ,content: edit_url+'/'+data.id
                      ,zIndex: layer.zIndex //重点1
                      ,yes: function(index, layero){
                      //点击确认触发 iframe 内容中的按钮提交
                      var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
                      submit.click();
                      }
                      ,success: function(layero){
                          layer.setTop(layero); //重点2
                      }
                  });
              }
          });
          var $ = layui.$, active = {
              reload: function(){
                  var demoReload = $('#test-table-reload');
                  //执行重载
                  table.reload('test-table-reload', {
                      page: {
                          curr: 1 //重新从第 1 页开始
                      }
                      ,where: {
                          uid: demoReload.val()
                      }
                  });
              },
              add: function(){
                  var index =  layer.open({
                      type: 2
                      ,title: '产品添加'
                      ,content: add_url
                      ,maxmin: true
                      ,area: ['60%', '70%']
                      ,btn: ['确定', '取消']
                      ,yes: function(index, layero){
                          //点击确认触发 iframe 内容中的按钮提交
                          var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
                          submit.click();
                      }
                  });
                  layer.full(index);
              }
          };



      });

      function temp_switch_tpl(d){
          if(d.status==1){
              return '<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭" checked>';
          }else{
              return '<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">';
          }
      }
      function temp_switch_tp2(d){
          if(d.status==1){
              return '<input type="checkbox" name="zzz" lay-skin="switch" lay-text="上架|下架" checked>';
          }else{
              return '<input type="checkbox" name="zzz" lay-skin="switch" lay-text="上架|下架">';
          }
      }
  </script>
@stop